<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 部门管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="6" v-for="(o, index) in 3" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="`http://cdn.wackyboy.top/dept_${o}.jpg~349`" class="image">
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">
                                <el-button type="text" style="center" class="button" @click="deptInfo(o)">查看</el-button>
                                
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

export default {
    name: 'basetable',
    data() {
        return {
        };
    },
    methods: {
        async deptInfo(deptId) {
            const res = await this.$http.get("/dept/showInfo", {
                params: {deptId : deptId}
            })
            // 页面跳转 
            console.log("部门信息", res)
            // this.$router.push({path:'/deptInfo'})
            this.$router.push({
                name: "deptInfo",
                params: {
                    deptManager : res.data.deptManager,
                    deptInfo: res.data.deptInfo,
                    deptName: res.data.deptName,
                    deptEmployee: res.data.employee
                }
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: flex;
      margin: auto;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
